<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="box">
    {{text}}
    <br>
    <input v-model="val" type="text">
    <select v-model="value" name="" id="">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input v-model="val1" type="text">=<span>{{res}}</span>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <script>

    new Vue({
      el: '#box',
      data: {
        text: 'hello Vue',
        val: '',
        val1: '',
        value: '+'
      },
      computed: {

        // res() {
        //   if (this.value === '+') {
        //     return this.val + this.val1
        //   } 
        //   else if (this.value === '-') {
        //     return this.val - this.val1
        //   }
        //   else if (this.value === '*') {
        //     return this.val * this.val1
        //   } else {
        //     return this.val / this.val1
        //   }
        // }
        res() {
          return eval(this.val + this.value + this.val1)
        }


      }
    })


  </script>

</body>

</html>